<template>
	<view class="content">
    <image class="banner" src="https://game.gtimg.cn/images/lol/act/img/skin/big17014.jpg"></image>
		<view class="input-group">
			<view class="input-row border">
				<text class="title1">账号：</text>
				<m-input type="text" focus clearable v-model="account" placeholder="请输入账号"></m-input>
			</view>
			<view class="input-row border">
				<text class="title1">邮箱：</text>
				<m-input type="text" clearable v-model="email" placeholder="请输入邮箱"></m-input>
			</view>
			<view class="input-row border">
				<text class="title1">密码：</text>	
				<m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
			</view>
			<view class="input-row border">
				<text class="title1">确认密码：</text>
				<m-input type="password" displayable v-model="comfirmPassword" placeholder="确认密码"></m-input>
			</view>
		</view>
		<view class="btn-row">
			<button class="cu-btn bg-aaa block lg" @tap="register">注册</button>
		</view>
	</view>
</template>

<script>
	import service from '../../service.js';
	import mInput from '../../component/m-input.vue';

	export default {
		components: {
			mInput
		},
		data() {
			return {
				account: '',
				password: '',
				email: '',
				comfirmPassword:''
			}
		},
		onLoad() {
			console.log("reg 我进来啦")
		},
		methods: {
		async	register() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.account.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 5 个字符'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}
				if (this.email.length < 3 || !~this.email.indexOf('@')) {
					uni.showToast({
						icon: 'none',
						title: '邮箱地址不合法'
					});
					return;
				}
				if(this.comfirmPassword!=this.password){
					uni.showToast({
						icon:'none',
						title:"两次输入的密码不正确"
					})
					return;
				}
				

				const data = {
					account: this.account,
					password: this.password,
					email: this.email
				}
				const Jsondata=JSON.stringify(data)
				const baseurl=getApp().globalData.BASE_URL
				console.log(baseurl)
				uni.request({
					url:baseurl+"/user/register",
					data:{
						username:this.account,
						password:this.password,
						email:this.email
					},
					success(res) {
						if(res.statusCode==200){
							uni.showToast({
								icon:'none',
								title:'注册成功'
							})
							uni.navigateBack({
								delta: 1
							});
						}
						else{
							uni.showToast({
								icon:'none',
								title:"用户名重复"
							})
						}
					},
					fail(res) {
						console.log("请求失败",res)
						uni.showToast({
							icon:'none',
							title:"请求失败"
						})
					},
					complete() {
						
					}
					
				})
				
				
				
			}
		}
	}
</script>

<style>
  .title1 {
    width: 90px;
	font-size: 30rpx;
  }
  .banner {
    margin: 0 auto;;
    width: 600upx;
    height: 350upx;
  }
  .sms {
    margin-top: 3px;
  }
  .cty {
    margin-top: 10px;
    padding: 5px 5px;
  },
  .my-cion {
  	background-color: #e84351;
  	color: #ffffff;
  }
  .content {
  		display: flex;
  		flex: 1;
  		flex-direction: column;
  		background-color: #efeff4;
  		padding: 10px;
  	}
  
  	.input-group {
		
  		background-color: #ffffff;
  		margin-top: 20px;
  		position: relative;
  	}
  
  	.input-group::before {
  		position: absolute;
  		right: 0;
  		top: 0;
  		left: 0;
  		height: 1px;
  		content: '';
  		-webkit-transform: scaleY(.5);
  		transform: scaleY(.5);
  		background-color: #c8c7cc;
  	}
  
  	.input-group::after {
  		position: absolute;
  		right: 0;
  		bottom: 0;
  		left: 0;
  		height: 1px;
  		content: '';
  		-webkit-transform: scaleY(.5);
  		transform: scaleY(.5);
  		background-color: #c8c7cc;
  	}
  
  	.input-row {
  		display: flex;
  		flex-direction: row;
  		/* position: relative; */
  		font-size: 30rpx;
  		line-height: 40px;
  	}
  
  	.input-row .title1 {
  		width: 72px;
  		padding-left: 15px;
    color: #e84351;
  	}
  
  	.input-row.border::after {
  		position: absolute;
  		right: 0;
  		bottom: 0;
  		left: 8px;
  		height: 1px;
  		content: '';
  		-webkit-transform: scaleY(.5);
  		transform: scaleY(.5);
  		background-color: #c8c7cc;
  	}
  
  .btn-row {
    padding:30px 0;
  }
  
  button.lg {
  }
</style>
